<template>
  <div class="department-container">
    <div class="app-container">
      <el-tabs v-model="activeName">
        <el-tab-pane label="角色管理" name="role">
          <el-button type="primary" size="small" @click="openDialog(null)">添加角色</el-button>
          <el-row>
            <el-table
              :data="RoleData"
              align="center"
              style="width: 100%;margin-top: 20px"
            >
              <el-table-column label="序号" width="120" type="index" align="center" />
              <el-table-column label="名称" prop="name" align="center" />
              <el-table-column label="描述" prop="description" align="center" />
              <el-table-column label="操作" align="center">
                <template v-slot="scope">
                  <el-button type="success" size="small">分配权限</el-button>
                  <el-button type="primary" size="small" @click="openDialog(scope.row)">编辑</el-button>
                  <el-button type="danger" size="small" @click="removeRole(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col style="text-align: center">
              <el-pagination
                layout="prev, pager, next"
                :current-page="params.page"
                :page-size="params.pagesize"
                :total="total"
                @current-change="changePage"
              />
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="公司管理" name="company">公司管理</el-tab-pane>
      </el-tabs>
    </div>
    <!-- 添加角色对话框  因为里面内容很少就直接在一个组件里写了 -->
    <el-dialog
      title="添加角色"
      :visible="dialogVisible"
      width="39%"
      @close="closeDialog"
    >
      <el-form ref="from" :model="resParams" :rules="rules" label-width="80px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="resParams.name" style="width: 100%" />
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
          <el-input v-model="resParams.description" style="width: 100%" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmOperation">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 角色管理相关接口
import { getRoleList, deleteRole, addRole, getRoleDetail, updateRole } from '@/api/setting'
export default {
  name: 'RoleManagement',
  data() {
    return {
      activeName: 'role',
      RoleData: [],
      params: { // 获取列表需要的参数
        page: 1,
        pagesize: 10
      },
      total: 0,
      resParams: { // 添加需要的参数
        name: '',
        description: ''
      },
      dialogVisible: false, // 控制对话框是否显示
      rules: {
        name: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入角色描述', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.HGetRoleList()
  },
  methods: {
    // 获取角色列表
    async HGetRoleList() {
      const { rows, total } = await getRoleList(this.params)
      this.total = total
      this.RoleData = rows
    },
    // 分页跳转
    changePage(curPage) {
      this.params.page = curPage
      this.HGetRoleList()
    },
    // 删除角色
    removeRole(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        try {
          await deleteRole(id)
          this.$message.success('删除成功！')
          this.HGetRoleList()
        } catch (e) {
          this.$message.success('删除失败!')
        }
      }).catch(() => {

      })
    },
    // 打开对话框
    async openDialog(data) {
      // 如果有data不为空就，代表是编辑，为空就是添加
      if (data) {
        // 获取单个角色详情
        const res = await getRoleDetail(data.id)
        this.resParams = res // 把拿到的数据直接赋值给 resParams
      }
      this.dialogVisible = true
    },
    // 关闭对话框
    closeDialog() {
      this.dialogVisible = false
      // 1.初始化数据
      this.resParams = {
        name: '',
        description: ''
      }
      // 2.清除表单验证规则
      this.$refs.from.resetFields()
    },
    // 确认操作，添加和编辑操作
    confirmOperation() {
      this.$refs.from.validate(async(valid) => {
        if (valid) {
          // 有id就是编辑
          if (this.resParams.id) {
            await updateRole(this.resParams)
            this.$message.success('编辑成功!')
          } else {
            await addRole(this.resParams)
            this.$message.success('添加角色成功!')
          }
          this.dialogVisible = false
          // 从新拉取角色数据
          this.HGetRoleList()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
